<template>
	<div class="orderlist">
		<van-nav-bar fixed left-text="返回" left-arrow :title="!isWeixin() ? '新增反馈' : ''" @click-left="handleBack" />
		<div class="inner">
			<div class="topTips">
				<span>申诉提交后48小时内处理，请耐心等待，如超过48小时未处理，默认退款</span>

			</div>
			<van-form ref="pushFormEle" label-width="100">
				<van-cell-group inset>
					<van-field name="title" required v-model="pushForm.title" label="描述" placeholder="请输入"
						:rules="[{ required: true, message: '请填写' }]" />
					<van-field required name="phone" v-model="pushForm.phone" autosize label="微信绑定电话"
						placeholder="请填写微信绑定电话" :rules="[{ required: true, message: '请填写' }]">
					</van-field>

					<!-- <van-field required name="ddimage" label="订单截图" :rules="[{ required: true, message: '请上传订单截图' }]">
						<template #input>

							<div v-if='isConfirm' @click="dingdan('dd')" class=""
								style="background-color: #F7F8FA;width: 80px;height: 80px;display: flex;justify-content: center;align-items: center;">
								<van-icon name="photograph" color='#DCDEE0' size='35px' />
							</div>

							<van-uploader :show-upload="false" :file-list="ddImg" v-model="ddImg" :max-count="1"
								:limit="1" :after-read="afterRead_1" ref='unloadImg' @delete='ddDelete'>
								<template #preview-cover="scope">
									<div class="preview-cover van-ellipsis">
										{{ scope.name }}
									</div>
								</template>
							</van-uploader>
						</template>
						
					</van-field> -->

					<van-field required name="zhimage" label="证据图片" :rules="[{ required: true, message: '请上传证据图片' }]">
						<template #input>
							<div v-if='isConfirm_2' @click="dingdan('zz')" class=""
								style="background-color: #F7F8FA;width: 80px;height: 80px;display: flex;justify-content: center;align-items: center;">
								<van-icon name="photograph" color='#DCDEE0' size='35px' />
							</div>
							<van-uploader :show-upload="false" :file-list="zhiImg" v-model="zhiImg" :max-count="1"
								:limit="1" :after-read="afterRead_2" ref='unloadImg_2' @delete='ddDelete_2'>
								<template #preview-cover="scope">
									<div class="preview-cover van-ellipsis">
										{{ scope.name }}
									</div>
								</template>
							</van-uploader>
						</template>
					</van-field>
					<!-- 2024-6-11 新增录音 -->
					<!-- <van-field name="luyin" label="电话录音">
						<template #input>
							<div v-if='isConfirm_3' @click="dingdan('ly')" class=""
								style="background-color: #F7F8FA;width: 80px;height: 80px;display: flex;justify-content: center;align-items: center;">
								<van-icon name="music-o" color='#DCDEE0' size='35px' />
							</div>
							<van-uploader accept='audio/*' :show-upload="false" :file-list="luYin" v-model="luYin"
								:max-count="1" :limit="1" :after-read="afterRead_3" ref='unloadImg_3'
								@delete='ddDelete_3'>
								<template #preview-cover="scope">
									<div class="preview-cover van-ellipsis">
										{{ scope.name }}
									</div>
								</template>
							</van-uploader>
						</template>
					</van-field> -->

				</van-cell-group>
				<!-- 2024-6-18 hdd新增 tips -->
				<div style="padding: 20px;">
					<span style="color: #d43030;display: block;font-weight: bolder;">申诉条件说明 </span>
					<span
						style="color: #f17029;font-weight: bolder;display: block;margin: 10px 0;">1、可申诉的部分原因包含以下情况：</span>
					<span>
						·信息虚假（联系方式错误；客户改变想法，不买了）；【申诉退款时上传通话录音】<br>
						·多次且长时间拨打均无法接通（72时内）；【申诉退款时上传通话记录的截屏】<br>
						·客户已购买（按要求及时联系客户）；【申诉退款时上传通话录音】<br>
						·信息描述不准确（需要招标、产品规格描述错误等）；<br>
						·客户否认采购设备，且不让厂家在和他联系的；<br>
					</span>
					<span
						style="color: #f17029;font-weight: bolder;  display: block;margin: 10px 0;">2、不可申诉的部分原因包含以下情况：</span>
					<span>
						·电话接通后客户嫌报价高或其他非平台因素，客户不在联系或接通电话；<br>
						·未及时联系导致客户到其他渠道采购；<br>
						·申诉说客户已采购，经核实后客户并未采购；<br>
						·客户有采购的需求，但采购周期较长；<br>
						·购买该条信息后超过72小时；<br>
						·以不小心购买、小孩误操作等原因申诉的；<br>
						·因不能满足客户要求提供资质、质检报告等相关资料、环保达不到客户要求等原因无法成交的；<br>
						·以客户不懂设备，或因不熟悉对方行业，无法帮客户确定采购需求的；<br>
						·信息详情内已注明区或品牌要求等，厂家因不能满足客户特殊要求导致无法继续沟通和交易的；</span>
					<span style="color: #d43030;display: block;margin: 10px 0;font-weight: bolder;">与客户沟通时注意事项</span>
					<span>
						1、您可以直接介绍“我们是XXX厂家，咱们这边是需要xxxx吗？”。<br>
						2、不建议使用如下话术：“在某某平台或网上看到您发布采购信息，说要xxx。”容易导致用户产生怀疑直接挂掉电话，后续几乎没有沟通机会了。<br>
						3、如果客户问你怎么知道的？你可以直接说是公司客服给我转过来的，我看看咱们是否可以合作。<br></span>
					<span style="color: #d43030;display: block;margin: 10px 0;font-weight: bolder;">
						注意：为保障行业生态健康发展，凡蓄意申诉骗取退款，一经核实，立即封号。
					</span>
				</div>
				<div style="margin: 16px">
					<van-button round block type="primary" @click="submit">
						提交反馈
					</van-button>
				</div>
			</van-form>
			<van-dialog v-model:show="dd_dialog" title="标题" show-confirm-button show-cancel-button
				@confirm="dd_dialogConfirm">
			</van-dialog>
		</div>

		<!-- 提示弹出框 -->

		<van-popup v-model:show="showpopup" round :style="{ height: '85%' }">

			<div v-if="popFlag=='dd'">
				<span
					style="display: inline-block;padding: 10px;font-size: 14px;font-weight: bolder;">{{tishi.dingdan}}</span>
				<img style="width: 100%;height: 100%;" :src="tishi.dingdanimage" />
			</div>
			<div v-if="popFlag=='zz'">
				<span
					style="display: inline-block;padding: 10px; font-size: 14px;font-weight: bolder;">{{tishi.zhengju}}</span>
				<img style="width: 100%;height: 100%;" :src="tishi.zhengjuimage" />
			</div>
			<div v-if="popFlag=='phone'">
				<span style="display: inline-block;padding: 10px;font-size: 14px;">{{tishi.phonetitle}}</span>
			</div>
			<div style="text-align: center;">
				<van-button type="primary" block @click="confirm_upload">上传图片</van-button>
			</div>
		</van-popup>
	</div>
</template>
<script setup lang="ts">
	import { getCookie } from "@/utils/index";
	import { ref, reactive } from "vue";
	import { useRouter, useRoute } from "vue-router";
	import { isWeixin } from "@/utils/index";
	import { fankuiaddApi, fankuiupdateApi, uploadFileApi, userInfoApi, tishiApi } from "@/api/user";
	import { showLoadingToast, showSuccessToast, showFailToast, showConfirmDialog, showToast } from 'vant';
	import { json } from "stream/consumers";


	const router = useRouter();
	const route = useRoute();
	const pushFormEle = ref();
	let options = route.query;

	console.log('options', options)
	const ddImg = ref();
	const zhiImg = ref();
	const luYin = ref();
	const showddImg = ref(false)
	const tishi = ref();
	const pushForm = reactive({
		phone: '',
		ddimage: '',
		zhimage: '',
		title: '',
		luyin: '',
		orderids: options.data
	});
	const unloadImg = ref();
	const unloadImg_2 = ref();
	const unloadImg_3 = ref();
	const isConfirm = ref(true);
	const isConfirm_2 = ref(true);
	const isConfirm_3 = ref(true);
	const dd_dialog = ref(false);
	// 订单截图模态框确认按钮点击方法
	const dd_dialogConfirm = () => {
		dd_dialog.value = false;
		isConfirm.value = false;
		console.log('unloadImg.value', unloadImg.value)
		unloadImg.value.chooseFile();
	}

	const ddDelete = () => {
		isConfirm.value = true;
	}
	const ddDelete_2 = () => {
		isConfirm_2.value = true;
	}
	const ddDelete_3 = () => {
		isConfirm_3.value = true;
	}
	// 提示弹出框确认按钮点击方法
	const confirm_upload = () => {
		if (popFlag.value == 'dd') {
			// isConfirm.value = false;
			unloadImg.value.chooseFile();
		} else if (popFlag.value == 'zz') {
			// isConfirm_2.value = false;
			unloadImg_2.value.chooseFile();
		}

		showpopup.value = false;
		console.log('unloadImg.value', unloadImg.value)

	}

	// 订单上传icon点击方法
	const dingdan = (val : any) => {
		if (val == 'ly') {
			unloadImg_3.value.chooseFile();
			return;
		}
		popFlag.value = val;
		// dd_dialog.value = true;
		showpopup.value = true;

	}

	const popFlag = ref('')
	const showpopup = ref(false);
	const handleBack = () => {
		if (history.state?.back) {
			router.back();
		} else {
			router.push("/user");
		}
	};

	const getTishi = async () => {
		let { data } = await tishiApi({});
		tishi.value = data;
	};
	getTishi();

	// const onLoad = async () => {


	// };
	// 订单截图上传tip
	const ddTips = () => {
		showpopup.value = true;
		popFlag.value = 'dd';
	};
	// 证据截图上传tip
	const zzTips = () => {
		showpopup.value = true;
		popFlag.value = 'zz'
	};

	const phoneTips = () => {
		showpopup.value = true;
		popFlag.value = 'phone'
	}


	// 订单截图
	const afterRead_1 = (file : any) => {
		let formData = new FormData();
		formData.append('file', file.file);

		console.log('订单截图:', ddImg)
		uploadFileApi(formData).then((res) => {
			if (res.code == 0) {
				pushForm.ddimage = res.data;
				isConfirm.value = false;
			} else {

			}
		}
		)
	};
	// 证据图片
	const afterRead_2 = (file : any) => {
		let formData = new FormData();
		formData.append('file', file.file);
		uploadFileApi(formData).then((res) => {
			if (res.code == 0) {
				pushForm.zhimage = res.data;
				isConfirm_2.value = false;
			} else {

			}
		}
		)
	};

	// 证据图片
	const afterRead_3 = (file : any) => {
		let formData = new FormData();
		formData.append('file', file.file);
		uploadFileApi(formData).then((res) => {
			if (res.code == 0) {
				pushForm.luyin = res.data;
				isConfirm_3.value = false;
			} else {

			}
		}
		)
	};
	const submit = async () => {
		let userData = await userInfoApi({ uid: getCookie('token') ? Number(getCookie('token')) : '', })

		// if (!userData?.data?.phone) {
		// 	return;
		// }
		pushFormEle.value.validate().then(() => {
			let toast = showLoadingToast({
				message: '提交中...',
				loadingType: 'spinner',
				forbidClick: true,
				duration: 0
			});
			let req = {
				uid: getCookie('token') ? Number(getCookie('token')) : '',
				phone: pushForm.phone,
				ddimage: pushForm.ddimage,
				zhimage: pushForm.zhimage,
				title: pushForm.title,
				luyin: pushForm.luyin,
				orderids:pushForm.orderids
			}
			fankuiaddApi(req).then((res) => {
				toast.close()
				if (res.code == 0) {
					showSuccessToast({
						message: '提交成功',
						duration: 1500,
						forbidClick: true,
						onClose: () => {
							router.back()
						}
					})
				} else {
					showFailToast(res.msg)
				}
			}
			)


		})

	}
</script>
<style>
	.inner {
		margin-top: 60px;
	}

	.luyinBtn {
		display: flex;
		white-space: nowrap;
	}

	.topTips {
		padding: 10px 20px;
		color: #f97623;
		font-weight: bolder;
	}
</style>